<template>
  <div class="use-validate">
    <button @click="submit" class="submit">提交</button>
    <p>useValidate :通过校验: {{ isPass ? "是" : "否" }}</p>
    <input type="text" ref="validateRef" />
    <button @click="resetError(unrefElement(validateRef))">重置表单</button>
  </div>
</template>
<script setup>
import { useValidate } from "@/useHooks";
import { ref } from "vue";
import { unrefElement } from "../useHooks/useValidate.js";

const validateRef = ref(null);
const { isPass, validate, resetError } = useValidate(
  validateRef,
  {
    success: res => {
      alert(res);
    },
    fail: res => {
      console.log("-----");
      alert(res);
    },
  },
  {
    max: 5,
    required: true,
  }
);

const submit = () => {
  let res = validate();
  console.log("res----", res.value);
};
</script>
<style>
.submit {
  margin-top: 20px;
}
input {
  margin-right: 20px;
  border: 1px solid #ccc;
}
.err_message {
  color: red;
}
.err_class {
  border-color: red;
}
</style>
